<template>
  <div class="_realTimeVideo">
    <div class="card_left">
      <Card :bordered="true" dis-hover style="height:200px;margin-bottom: 10px">
        <p slot="title">搜索</p>
        <Form :label-width="80" :model="formData" style="margin-top: 20px">
          <FormItem label="车牌号">
            <Input v-model="formData.carPlateNo" placeholder="请输入车牌号" prefix="md-car" suffix="ios-search"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="tableLoadData">搜索</Button>
            <Button style="margin-left: 8px" @click="reset()">重置</Button>
          </FormItem>
        </Form>
      </Card>
      <Card :bordered="true" dis-hover style="height: calc(100% - 210px); ">
        <p slot="title">车辆列表</p>
        <div ref="tableH" style="height: calc(100% - 32px);">
          <Table ref="selection" :loading="tableLoading" :columns="list"  :height="tableHeight" :data="tableData"  border></Table>
        </div>
        <Page :total="tableTotal" simple :current="page" @on-change="changePage" :styles="pageStyle" />
      </Card>
    </div>
    <div style="width: calc(100% - 390px);height: 100%;background: #fff;float: right">
      <cptVideo ref="videoOn" @empty="empty()"></cptVideo>
    </div>
  </div>
</template>

<script>

import cptVideo from './CptVideo'

export default {
  components: {
    cptVideo
  },
  data() {
    return {
      tableHeight: 0,
      formData: {
        videoState:1
      },
      tableLoading:false,
      page: 1,//当前页码
      limit: 10,//当前页码
      tableTotal: 0,//总条数
      tableData: [], //表格数据
      pageStyle: {
        textAlign: "center",
        marginTop:'8px',
      },
      nowSelectVehicle:[],
      list: [
        {title: '序号', width: 61, align: 'center',render:(h, params) => {
            return h('span',{
            },(this.page - 1) *  10 + parseInt(params.index) + 1 )
          }},
        { title: '车牌号', key: 'carPlateNo',align: 'center',render: (h, params) => {
            var color = '';
            if (params.row.carPlateColor == 1) {//蓝色
              color = "primary"
            }else if (params.row.carPlateColor == 2) {//黄色
              color = "warning"
            }else if (params.row.carPlateColor == 3) {//黑色
              color = "#515a6e"
            }else if (params.row.carPlateColor == 4) {//白色
              color = "default"
            }else if (params.row.carPlateColor == 5) {//绿色
              color = "success"
            }else if (params.row.carPlateColor == 93) {//黄绿色
              color = "#8ebe19"
            }else if (params.row.carPlateColor == 9) {//其他
              color = "blue"
            }else{
              color = "blue"
            }
            return h('Tag',{props: {color: color},style:{cursor: 'pointer'},},[h('div',{
              on:{
                click: () => {
                  //单视频播放
                  this.GetDeviceNo(params.row.carPlateNo)
                }
              }
            },params.row.carPlateNo)]);
          }
        },
        {
          title: '视频状态', key: 'chn',align: 'center', render: (h, params) => {
            console.log(params)
            return h('img',{
              attrs:{src:'../../static/img/icon_monitor_on.png'},
              style:{
                width: '24px',
                height: '24px',
              }
            })
          }
        }
      ]
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    that.$nextTick(function () {
      that.tableHeight = this.$refs.tableH.offsetHeight;
    })
    that.tableLoadData()
    that.getJsession()
  },
  methods: {//执行的方法
    reset(){
      this.formData.carPlateNo = ''
      this.tableLoadData()
    },
    // 获取 会话号  与储存本地会话号
    getJsession() {
      let that = this
      var jsession = localStorage.getItem('ConversationUuid')
      if (!jsession) {
        that.axios.post("zdaqweb/StandardApiAction_login.action?account=admin&password=shipinyou666", {}).then(res => {
          localStorage.setItem('ConversationUuid', res.data.jsession)
        })
      }
    },
    // 获取车辆列表
    tableLoadData() {
      let that = this;
      let formDataSearch = JSON.parse(JSON.stringify(that.formData));//获取表单数据  和分页 条数
      formDataSearch.page = that.page;
      formDataSearch.limit = that.limit;
      that.tableLoading = true;
      that.axios.post(that.apiUrl.webApi + "/core/vehicle/coreVehiclePageList", formDataSearch).then(res => {
        that.tableLoading = false;
        if (!!res) {
          that.tableData = res.data.data;
          that.tableTotal = res.data.count;
          // that.vehicleSelected = [];//搜索 删除选中数据
          // that.singlePointAdd();//发起地图渲染业务
        }
      }).catch(err => {
        console.log('失败', err);
      })
    },
    changePage(page) {//返回第几页
      this.page = page;//设置当前页数
      this.tableLoadData();
    },
    empty(){
      this.nowSelectVehicle = []
    },
    GetDeviceNo(carPlateNo){
      if (this.nowSelectVehicle.indexOf(carPlateNo) != -1) {
        this.$Message.warning('该车辆已存在');
        return false;
      }
      let that = this
      if (carPlateNo && localStorage.getItem('ConversationUuid')){
        let parameter = {
          'jsession': localStorage.getItem('ConversationUuid'),
          'vehiIdno': carPlateNo
        }
        let data = that.qs.stringify(parameter);
        this.axios.post('zdaqweb/StandardApiAction_getDeviceByVehicle.action',data).then( res => {
          if (res.data.result != 0){
            that.$Message.error('未查询到该车辆的视频数据');
          }else {
            if (res.data.devices.length !== 0){
              this.$refs.videoOn.realTimeVideo(res.data.devices[0].did,localStorage.getItem('ConversationUuid'))
              this.nowSelectVehicle.push(carPlateNo)
            } else {
              console.log(res.data)
              that.$Message.error('无设备号');
            }
          }
        }).catch(err => {
          console.log('失败', err);
        })

      }else {

      }
    }

  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._realTimeVideo {
  padding: 10px;
  height: 100%;
  .ivu-card-body {
    height: calc(100% - 51px);
  }
  .card_left {
    width: 380px;
    height: 100%;
    float: left;
    background: #fff;
  }
}

</style>
